﻿@{
    ViewBag.Title = "Pencas Blanqueada - Pronósticos";
}

@if (ViewBag.TablasPartidos != null && ViewBag.TablasPartidosSegundaFase != null)
{
    <div class="small-12 medium-10 large-8 large-offset-1 columns">
        <div class="tabPronosticosContainer row">
            <div class="small-10 small-offset-1 columns end" style="height:40px">
                <ul class="small-block-grid-3">
                    <li class="tabPronosticos active" data-openFase="group">Grupos</li>
                    <li class="tabPronosticos" data-openFase="playoff">2ª fase</li>
                    <li class="tabPronosticos" data-openFase="specials">Especiales</li>
                </ul>
            </div>
        </div>
    
        <div class="contenedorFase" data-fase="group">
            @foreach (System.Data.DataTable table in ((System.Data.DataSet)ViewBag.TablasPartidos).Tables)
            {
                <div class="contenedorPronosticos group row" data-containerType="group" style="display:none">
                    <div class="row" style="margin-top:20px; margin-bottom:20px">
                        <div class="small-4 columns text-right backArrow" data-arrowType="group"><img height="25px" width="25px" src="@Url.Content("~/Content/img/backArrow.png")"/></div>
                        <div class="small-4 columns text-center nombreGrupo">@table.Rows[0]["NombreGrupo"]</div>
                        <div class="small-4 columns text-left forwardArrow" data-arrowType="group"><img height="25px" width="25px" src="@Url.Content("~/Content/img/forwardArrow.png")"/></div>
                    </div>
                    @foreach (System.Data.DataRow row in table.Rows)
                    {
                        <div class="match row">
                            <div class="show-for-medium-up medium-1 medium-offset-1 columns matchDate" style="font-size:80%; margin-top:8px">@String.Format("{0:dd/MM}", DateTime.Parse((string)row["FechaHora"]))</div>
                            <div class="show-for-medium-up medium-1 columns matchTime" style="font-size:80%; margin-top:8px">@String.Format("{0:HH:mm}", DateTime.Parse((string)row["FechaHora"]))</div>
                            <div class="small-4 medium-2 columns text-right" style="margin-top:8px">@row["NombreA"]</div>
                            <div class="small-1 medium-1 columns text-center" style="margin-top:4px"><img height="30px" width="30px" src="@Url.Content(string.Concat("~/Content/img/", row["NombreA"], ".png").Replace(" ", "_").Replace("á", "a").Replace("é", "e").Replace("í", "i").Replace("ó", "o").Replace("ú", "u").Replace("ñ", "n"))" alt=""/></div>
                            <div class="small-2 medium-2 columns text-center" style="margin-top:4px"><input name=@((string)"resultado" + row["Id"]) class="resultField" onkeydown = "return (event.keyCode!=13);" resultSelect=@row["Id"] value="@row["PronosticoA"]-@row["PronosticoB"]" readonly="readonly";/></div>
                            <div class="medium-8 medium-offset-2 end columns resultSelect" id=@((string)"resultSelect" + row["Id"]) style="position:absolute"></div>
                            <div class="small-1 medium-1 columns text-center" style="margin-top:4px"><img height="30px" width="30px" src="@Url.Content(string.Concat("~/Content/img/", row["NombreB"], ".png").Replace(" ", "_").Replace("á", "a").Replace("é", "e").Replace("í", "i").Replace("ó", "o").Replace("ú", "u").Replace("ñ", "n"))" alt=""></div>
                            <div class="small-4 medium-3 columns" style="margin-top:8px">@row["NombreB"]</div>
                        </div>
                    }
                </div>
            }
        </div>
    
        <div class="contenedorFase" data-fase="playoff">
            @foreach (System.Data.DataTable table in ((System.Data.DataSet)ViewBag.TablasPartidosSegundaFase).Tables)
            {    
                <div class="contenedorPronosticos playoff row" data-containertype="playoff">
                    <div class="row" style="margin-top:20px; margin-bottom:20px">
                        <div class="small-4 columns text-right backArrow" data-arrowtype="playoff"><img height="25px" width="25px" src="Content/img/backArrow.png"></div>
                        <div class="small-4 columns text-center nombreGrupo">@table.Rows[0]["NombreGrupo"]</div>
                        <div class="small-4 columns text-left forwardArrow" data-arrowtype="playoff"><img height="25px" width="25px" src="Content/img/forwardArrow.png"></div>
                    </div>

                    @foreach (System.Data.DataRow row in table.Rows)
                    {
                        <div class="match row">
                            <div class="show-for-medium-up medium-1 columns matchDate" style="margin-top:8px; font-size:80%">@String.Format("{0:dd/MM}", DateTime.Parse((string)row["FechaHora"]))</div>
                            <div class="show-for-medium-up medium-1 columns matchTime" style="margin-top:8px; font-size:80%">@String.Format("{0:HH:mm}", DateTime.Parse((string)row["FechaHora"]))</div>
                            <div class="small-1 medium-1 columns text-right positionText" style="margin-top: 8px;" data-positionText="@row["Id"]A"></div>
                            <div class="small-3 medium-2 columns" style="height:25px; margin-top:5px"><select id="@row["Id"]A" class="teamSelect"></select></div>
                            <div class="small-2 medium-2 columns text-center" style="margin-top:4px;"><input name=@((string)"resultado" + row["Id"]) class="resultField" onkeydown = "return (event.keyCode!=13);" resultSelect=@row["Id"] value="@row["GolesA"]-@row["GolesB"]" readonly="readonly";/></div>
                            <div class="medium-8 medium-offset-2 end columns resultSelect" id=@((string)"resultSelect" + row["Id"]) style="position:absolute"></div>
                            <div class="small-3 medium-2 columns" style="height:25px; margin-top:5px"><select id="@row["Id"]B" class="teamSelect"></select></div>
                            <div class="small-1 medium-1 columns text-left positionText" style="margin-top: 8px;" data-positionText="@row["Id"]B"></div>
                            <div class="small-2 medium-1 medium-offset-1 columns">
                                <div style="width:20px; margin-top: 8px; font-weight: bold; color: black; background-color:White; border-radius: 8px 8px 8px 8px">@row["Id"]</div>
                            </div>
                        </div>
                    }

                    @if ((string)table.Rows[0][0] == "19")
                    {
                        <div class="leyendaPronostico row" style="margin-top:5px">
                            <div class="small-12 columns text-center">1T: Mejor Tercero</div>
                            <div class="small-12 columns text-center">2T: Segundo Mejor Tercero</div>
                        </div>
                    }
                    

                </div>    
            }
        </div>
    
        <div class="contenedorFase" data-fase="specials">
            <div class="contenedorPronosticos specials row" data-containertype="specials">
                <div class="row" style="margin-top: 20px">
                    <div class="small-4 medium-3 medium-offset-2 columns text-right" style="margin-top:8px">Campeón:</div>
                    <div class="small-6 medium-4 columns end" style="margin-bottom:15px"><select id="campeon"></select></div>
                </div>
                <div class="row">
                    <div class="small-4 medium-3 medium-offset-2 columns text-right" style="margin-top:8px">Segundo:</div>
                    <div class="small-6 medium-4 columns end" style="margin-bottom:15px"><select id="segundo"></select></div>
                </div>
                <div class="row">
                    <div class="small-4 medium-3 medium-offset-2 columns text-right" style="margin-top:8px">Tercero:</div>
                    <div class="small-6 medium-4 columns end" style="margin-bottom:15px"><select id="tercero"></select></div>
                </div>
                <div class="row">
                    <div class="small-4 medium-3 medium-offset-2 columns text-right" style="margin-top:8px">Más goles:</div>
                    <div class="small-6 medium-4 columns end" style="margin-bottom:15px"><select id="masGoles"></select></div>
                </div>
                <div class="row">
                    <div class="small-4 medium-2 medium-offset-3 columns text-right" style="margin-top:8px; margin-bottom:30px">Total goles:</div>    
                    <div class="small-3 medium-2 columns end text-center"><input id="totalGoles" style="width:90%; text-align:center" type="text" value="0" /></div>
                    
                </div>                
            </div>
        </div>

        <div class="row">
            <div id="respuestaGuardado" class="small-6 columns text-right" style="font-weight: bold; margin-top: 27px; font-size: 1.2em;">&nbsp;</div>
            <div class="small-2 columns end text-center"><img style="display:none; margin-top: 27px;" id="guardarLoader" height="20px" width="20px" src="Content/img/ajax-loader.gif"></div>
            <div class="small-6 columns text-left"><button id="guardarButton" class="btn btn-danger" style="margin-top: 20px" type="button">Guardar</button></div>  
        </div>

    </div>
}


<input id="algunResultAbierto" type="hidden" value="false"/>

<!--[if IE]>
    <style type='text/css'>
    .resultField{width:100% !important}
    </style>
    <![endif]-->

<script type="text/javascript">
    $(document).ready(function () {
        $("#menu-bar li").removeClass("active");
        $(".liPronosticos").addClass("active");

        var email = '@Session["email"]';
        setEmail(email);

        $(".contenedorFase").hide();
        $(".contenedorPronosticos").hide();
        $(".contenedorFase").first().show();
        $(".contenedorFase").each(function () {
            $(this).find(".contenedorPronosticos").first().show();
        });

        //TEXTOS PARA SABER QUÉ PARTIDO SE ESTÁ PRONOSTICANDO
        $("[data-positionText='19A']").text("1A"); $("[data-positionText='19B']").text("1T");
        $("[data-positionText='20A']").text("2A"); $("[data-positionText='20B']").text("2C");
        $("[data-positionText='21A']").text("1B"); $("[data-positionText='21B']").text("2T");
        $("[data-positionText='22A']").text("1C"); $("[data-positionText='22B']").text("2B");

        $("[data-positionText='23A']").text("G19"); $("[data-positionText='23B']").text("G20");
        $("[data-positionText='24A']").text("G21"); $("[data-positionText='24B']").text("G22");

        $("[data-positionText='25A']").text("P23"); $("[data-positionText='25B']").text("P24");
        $("[data-positionText='26A']").text("G23"); $("[data-positionText='26B']").text("G24");

        //CARGO EQUIPOS POSIBLES EN CADA FASE
        $("#19B, #21B, #23A, #23B, #24A, #24B, #25A, #25B, #26A, #26B, #campeon, #segundo, #tercero, #masGoles").append(
            "<option value='1'>Chile</option><option value='2'>México</option><option value='3'>Ecuador</option><option value='4'>Bolivia</option>" + 
            "<option value='5'>Argentina</option><option value='6'>Uruguay</option><option value='7'>Paraguay</option><option value='8'>Jamaica</option>" +
            "<option value='9'>Brasil</option><option value='10'>Colombia</option><option value='11'>Perú</option><option value='12'>Venezuela</option>");

        $("#19A, #20A").append("<option value='1'>Chile</option><option value='2'>México</option><option value='3'>Ecuador</option><option value='4'>Bolivia</option>");
        $("#21A, #22B").append("<option value='5'>Argentina</option><option value='6'>Uruguay</option><option value='7'>Paraguay</option><option value='8'>Jamaica</option>");
        $("#20B, #22A").append("<option value='9'>Brasil</option><option value='10'>Colombia</option><option value='11'>Perú</option><option value='12'>Venezuela</option>");

        @if (ViewBag.TablasPartidosSegundaFase != null)
        {
            foreach (System.Data.DataTable table in ((System.Data.DataSet)ViewBag.TablasPartidosSegundaFase).Tables)
            {
                foreach (System.Data.DataRow row in table.Rows)
                {
                    <text>$("#" + </text>@row["Id"]<text> + "A").val(</text>@row["IdA"]<text>)</text>
                    <text>$("#" + </text>@row["Id"]<text> + "B").val(</text>@row["IdB"]<text>)</text>   
                }
            }
        }

        @if (ViewBag.TablaPronosticosEspeciales != null)
        {
            foreach (System.Data.DataRow row in ((System.Data.DataTable)ViewBag.TablaPronosticosEspeciales).Rows)
            {
                <text>$("#campeon").val(</text>@row["IdPrimero"]<text>);</text>
                <text>$("#segundo").val(</text>@row["IdSegundo"]<text>);</text>
                <text>$("#tercero").val(</text>@row["IdTercero"]<text>);</text>
                <text>$("#masGoles").val(</text>@row["IdMasGoles"]<text>);</text>
                <text>$("#totalGoles").val(</text>@row["totalGoles"]<text>);</text>
            }
        }

        $(".tabPronosticos").click(function () {
            $(".tabPronosticos").removeClass("active");
            $(this).addClass("active");
            var fase = $(this).attr("data-openFase");
            $(".contenedorFase").hide();
            $("[data-fase='" + fase + "']").show();
            $("#algunResultAbierto").attr("value", "false");
            $(".resultSelect").hide();

            if($("#19A").val() == null){
                $("#19A, #19B, #20A, #21B, #23A, #23B, #24A, #24B, #25A, #25B, #26A, #26B, #campeon, #segundo, #tercero, #masGoles").val(1);
                $("#totalGoles").val(0);
                $("#21A, #22B").val(5);
                $("#20B, #22A").val(9);
            }

            $(window).resize();
            $("#guardarButton").click();
        });

        $('#totalGoles').keyup(function() {
            var numbers = $(this).val();
            $(this).val(numbers.replace(/\D/, ''));
        });

        $("#guardarButton").click(function () {
            
            if (!$(this).attr("disabled")) {
                var jsonMatches = new Object();
                $(".resultField").each(function (key, value) {
                    var matchId = $(this).attr("resultSelect");
                    var result = $(this).val();
                    if (matchId > 18) {
                        jsonMatches[matchId] = result + ";" + $("#" + matchId + "A").val() + "-" + $("#" + matchId + "B").val();
                    }
                    else {
                        jsonMatches[matchId] = result;
                    }
                });
                
                if(isNaN($("#totalGoles").val())){
                    $("#totalGoles").val("0");
                }

                $.ajax({
                    type: 'POST',
                    url: "@Url.Action("GuardarPronostico", "Partidos")",
                    data: {
                        partidos: JSON.stringify(jsonMatches),
                        campeon: $("#campeon").val(),
                        segundo: $("#segundo").val(),
                        tercero: $("#tercero").val(),
                        masGoles: $("#masGoles").val(),
                        totalGoles: $("#totalGoles").val().trim()
                    },
                    beforeSend: function () {
                        $("#guardarButton").hide();
                        $("#guardarLoader").show();
                    },
                    success: function (result) {
                        $("#guardarLoader").hide();
                        $("#guardarButton").show();
                        if(result == 1){
                            $("#respuestaGuardado").css("color", "green");
                            $("#respuestaGuardado").text("Guardado");
                        }
                        else{
                            $("#respuestaGuardado").css("color", "red");
                            $("#respuestaGuardado").text("Ya no se pueden realizar pronósticos");
                        }
                        $("#respuestaGuardado").fadeOut(5000, function () {
                            $("#respuestaGuardado").html("&nbsp;");
                            $("#respuestaGuardado").show();
                        });
                    },
                    complete: function () {
                    }
                });
            }

            $(".positionText").fitText(0.22);
        });

        $(".buttonPronosticar").fitText();
        $(".buttonVerMas ").fitText();
        $(".matchDate").fitText(0.27);
        $(".matchTime").fitText(0.27);
    });
</script>